<!--
 * @Author: your name
 * @Date: 2021-04-13 15:30:49
 * @LastEditTime: 2021-06-30 09:55:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \dolphin-data-center-front-end\src\pages\owns\EditRoleModal.vue
-->
<template>
  <!-- 新建角色Modal -->
  <a-modal :title="roleType==0?'新增角色':'编辑角色'" :visible="isRoleModal" ok-text="保存" @ok="handleOk" @cancel="handleCancel" :z-index="99">
    <a-form-model ref="newRole" :model="newRoleState" :rules="newRoleRules" :label-col="{span:4}" :wrapper-col="{span:18}">
      <a-form-model-item label="角色状态" prop="enableIf">
        <a-switch v-model="newRoleState.enableIf" />
      </a-form-model-item>
      <a-form-model-item label="角色名称" prop="name">
        <a-input v-model="newRoleState.name" placeholder="请输入角色名称" allow-clear />
      </a-form-model-item>
      <a-form-model-item label="角色描述" prop="memo">
        <a-textarea v-model="newRoleState.memo" :max-length="300" :auto-size="{ minRows: 5 }" placehold er="请输入角色描述" allow-clear />
        <span style="position: absolute;right: 10px;bottom: -5px;color: #ccc;">{{newRoleState.memo?newRoleState.memo.length:0}}/300</span>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
export default {
  name: "EditRoleModal",
  props: {
    isRoleModal: {
      type: Boolean,
      default: false
    },
    role: Object,
    roleType: Number
  },
  watch: {
    "role": {
      handler (val) {
        if (val) {
          this.newRoleState = val;
        }
      },
      immediate: true,
      deep: true
    }
  },
  data () {
    return {
      newRoleState: {
        enableIf: true,
        name: "",
        memo: ""
      },
      newRoleRules: {
        name: [
          { required: true, message: "角色名称不允许为空！", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    handleOk () {
      const that = this;
      that.$refs.newRole.validate(valid => {
        if (valid) {
          that.$emit("cancelModal", {
            modal: "新建角色", success: "ok", data: that.newRoleState
          });
        } else {
          return false;
        }
      });
    },
    handleCancel () {
      this.$refs.newRole.resetFields();
      this.$emit("cancelModal", {
        modal: "新建角色", success: "cancel", data: ''
      });
    },
  }
};
</script>

<style>
</style>